<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script>
        function creerListe () {
            var elementFormulaire = document.getElementById("form1");
            
            var div = document.createElement("div");
            div.id = "zone_form_cree";
            
            var titre = document.createElement("h1");
            titre.innerHTML = "Mon formulaire :";
            
            var select = document.createElement("select");
            select.name = "ville";
            select.id = "ville";
            
            
            
            var tableau_villes = new Array();   //Il faut définir une variable de type tableau.
            tableau_villes[1] = "pau";          //Puis j'affecte des valeurs par rapport à une clé.
            tableau_villes[2] = "Bayonne";
            tableau_villes[3] = "Toulouse";
            
            for(var x=1; x<tableau_villes.length; x++){ //Une boucle FOR va permettre de créer plus rapidement les options de la balise SELECT
                window["option"+x] = document.createElement("option"); //variable dynamique
                window["option"+x].value = x;
                window["option"+x].innerHTML = tableau_villes[x];   
            }
           
            var boutonSubmit = document.createElement("input");
            boutonSubmit.type = "submit";
            boutonSubmit.value = "Bouton Submit !";
            
            
            select.appendChild(option1); //Il faut construire les noeuds dans le bon ordre !
            select.appendChild(option2);
            select.appendChild(option3);
            
            div.appendChild(titre);
            div.appendChild(select);
            div.appendChild(boutonSubmit);
            
            elementFormulaire.appendChild(div);
        }
      
        </script>
        
    </head>
    
    <body>
        <form name="form1" id="form1" action="">
            <input type="button" value="Compléter le formulaire !" onclick="creerListe();">
        </form>  
    </body>
</html>
